<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
            width: 600px;

        }

        li {
            height: 50px;
        }

        p {
            display: inline-block;
            width: 200px;
        }

        span {
            cursor: pointer;
            width: 50px;
            display: inline-block;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>今日新闻</h2>
    <input type="text" id="text"> <button id="btn">发布新闻</button>
    <ul class="list-new">
    </ul>
</body>
<script>
    // 获取元素 注册事件
    var listnew = document.querySelector('.list-new');
    var text = document.getElementById('text');
    var btn = document.getElementById('btn');
    // 获取当前时间 将时间戳封装为一个函数 方便后期调用
    function Getdate() {
        var timer = new Date();
        var y = timer.getFullYear();
        var M = timer.getMonth() + 1;
        var d = timer.getDate();
        var h = timer.getHours();
        var m = timer.getMinutes();
        var s = timer.getSeconds();
        if (M < 10) {
            M = '0' + M;
        }
        if (d < 10) {
            d = '0' + d;
        }
        if (h < 10) {
            h = '0' + h;
        }
        if (m < 10) {
            m = '0' + m;
        }
        if (s < 10) {
            s = '0' + s;
        }
        var time = y + '-' + M + '-' + d + ' ' + h + ':' + m + ':' + s;
        // console.log(time);
        return time;
    }
    // 先定义一个空的数组 里面没有内容
    // 每一条数据都是一个新的对象 每一个对象都要有一个对应的 id 方便我们以后对数据进行操作
    // 我们要给每一个新增的对象都添加一个id
    function getID() {
        let id;
        // 假如数组里面没有内容 那么我的第一个数据的 id 就是从1开始
        if (arrData.length === 0) {
            id = 1;
        } else {
            // 假如我的数组里面有内容 那么我要给新增的对象加id 每次新的id都要 + 1
            let max = arrData[0].id;
            for (var i = 1; i < arrData.length; i++) {
                if (arrData[i].id > max) {
                    max = arrData[i].id;
                }
            }
            id = max + 1;
        }
        return id;
    }
    // 每次刷新之后旧的数据就会被新的数据给覆盖 我们不希望他这样做
    // 我们要将再本地储存中的数据拿出来赋予给一个数组 最后将数组的数据再放回本地储存里面
    // 有可能一开始我们拿到的数组是空的 我们要先判断一下 用 短路运算 如果是 我们就赋予它一个数组
    let str = localStorage.getItem('wbsj');
    let arrData = JSON.parse(str) || [];
    arrData.forEach(function(e,i){
    // 根据每个新闻数据，创建一个li
    let li = document.createElement('li');
    li.innerHTML = '<p>' + e.content + '</p><span>' + e.time + '</span><span class="del" data-id = '+ e.id +'>删除</span>';
    listnew.insertBefore(li,listnew.children[0]);
  });
    // 封装函数
    function Makyhtml() {
        // 判断输入框是否为空
        if (text.value.trim().length == 0) {
            alert('请输入内容!')
            text.value = '';
            return;
        }
        // 調用函數
        var time = Getdate();
        var id = getID();
        // 获取到输入框的内容
        var content = text.value;
        var li = document.createElement('li');
        li.innerHTML = '<p>' + content + '</p><span>' + time + '</span><span class="del" data-id = '+ id +'>删除</span>';
        // console.log(li.innerHTML)
        listnew.insertBefore(li, listnew.children[0]);
        text.value = '';
        // 每创建一条新数据就是创建一个对象
        let data = {
            id: id,
            content: content,
            time: time
        }
        // 讲对象存进数组里面
        arrData.push(data);
        // 先将对象转换成json格式的字符串 再存进本地
        let obj = JSON.stringify(arrData);
        localStorage.setItem('wbsj', obj);
        }
    btn.onclick = function () {
        Makyhtml();
    }
    // 键盘事件 点击回车发布 
    text.onkeyup = function (e) {
        // 如果同时按下 Ctrl 跟 回车键 就发布
        if (e.ctrlKey && e.keyCode === 13) {
            Makyhtml();
        }
    }
    // 根据類名來刪除元素
    listnew.addEventListener('click',function(e){
        // console.log(e.target.classList)
        // 獲取到當前元素 刪除元素
        if(e.target.classList.contains('del')){
            let li = e.target.parentNode;
            listnew.removeChild(li);
        }
        // 不止在頁面上刪除 我們也要將他從本地存儲裡面給刪除掉
        // 獲取到當前元素的id
        let delID = parseInt(e.target.dataset.id);
        // 先拿到本地存儲的數據 將其轉換
        let str = localStorage.getItem('wbsj');
        let arr = JSON.parse(str);
        // 循環數組 遍歷對象
        arr.forEach(function(e,i){
            // 根據對應的 id 來刪除
            if(e.id === delID){
                // 移除元素
                arr.splice(i,1)
            }
        })
        // 更新數組 放回本地
        let json = JSON.stringify(arr);
        localStorage.setItem('wbsj',json);
    })
</script>
</html>